<template>
	<view>
		<LuckyWheel ref="myLucky" width="600rpx" height="600rpx" :blocks="blocks" :prizes="prizes" :buttons="buttons"
			:defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />
			<image :src="adUrl" mode="widthFix" class="ad-class"></image>
			<u-gap height="10"></u-gap>
	</view>
</template>

<script>
	import LuckyWheel from '@/node_modules/@lucky-canvas/uni/lucky-wheel'
	import {
		getLotteryTimes,
		getPrizes,
		startLottery,
		getShopLotteryInfo,
		getShopAd
	} from '@/api/consomer/lottery/lottery.js'



	export default {
		components: {
			LuckyWheel
		},

		data() {
			return {
				shopId: '',
				times: 0,
				prizes: [],
				prize: {},
				adUrl:'',


				blocks: [{
					padding: '13px',
					background: '#fe0e0f'
				}],
				buttons: [{
						radius: '50px',
						background: 'red'
					},
					{
						radius: '45px',
						background: '#f53b00'
					},
					{
						radius: '40px',
						background: '#faebb2',
						pointer: true,
						fonts: [{
							text: '开始',
							top: '-20px',
							fontColor: '#aa38ff',
							fontWeight: 1000,
							fontSize:'28px',
						}]
					},
				],
			}
		},
		onLoad: function(options) {
			this.shopId = options.shopId
			this.init()
		},
		methods: {
			init() {
				getShopLotteryInfo({
					shopId: this.shopId
				}).then((res) => {
					if (res.errCode !== 0) {
						return uni.showToast({
							icon:'none',
							title:res.errMsg
						})
					}
					this.times = res.times
					this.prizes = []
					res.prizeVos.forEach((val, index) => {
						this.prizes.push({
							id: val.id,
							fonts: [{
								text: val.name,
								top: '5%',
								fontColor: index % 2 == 0 ? '#fcf6c4' : '#e9212b',
							}],
							imgs: [{
								src: val.type == 1 ? '/static/icons/gift.png' : '/static/icons/coupon.png',
								width: 40,
								height: 40,
								top:'50%'
							}],
							background: index % 2 == 0 ? '#e50118' : '#faf8bf',
						})
					})
				})
			
				getShopAd(this.shopId).then((res) => {
					this.adUrl = res?.adUrl || ''
				})
			},

			// 点击抽奖按钮触发回调
			startCallBack() {
				if (this.times == 0) {
					return uni.showModal({
						title: '今日次数已用完'
					})
				}

				// 先开始旋转
				this.$refs.myLucky.play()
				// 使用定时器来模拟请求接口
				setTimeout(() => {
					startLottery({
						shopId:this.shopId,
						times:1
					}).then((res) => {
						this.prize = res
						let selIndex = -1;
						this.prizes.forEach((val, index) => {
							if (val.id == this.prize.id) {
								selIndex = index;
								return
							}
						})
						if (selIndex != -1) {
							this.$refs.myLucky.stop(selIndex)
						} else {
							uni.showToast({
								icon: 'error',
								title: '数据出错'
							})
							this.$refs.myLucky.stop()
						}
					}).catch((r) => {
						this.$refs.myLucky.stop()
					})
				}, 3000)
			},
			// 抽奖结束触发回调
			endCallBack() {
				// 奖品详情
				this.times--
				if (this.times > 0) {
					this.init()
				}
				uni.showModal({
					title: `恭喜：您获得[${this.prize.name}]`,
					confirmText:'查看奖品',
					success: (res) => {
						if(res.confirm) {
							uni.redirectTo({
								url:'/subpkg/consumer/myPrizes/myPrizes'
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: $chiness-red;
	}
.ad-class{
	width: 100%;
	margin-top: 5px;
	
}
</style>